$(function() { //入口函数
    $('.rules').click(function() { //点击展示游戏规则
        $('.rule').stop().fadeIn(800); //淡入
    }); //800毫秒完成淡入/淡出
    $('.close').click(function() { //单击关闭游戏规则
        $('.rule').stop().fadeOut(800); //淡出
    }); //开始游戏区域
    $('.start').click(function() {
        $(this).stop().fadeOut(600); //把当前开始按钮淡出
        progressHandler(); //调用自定义进度条函数
        startWolfAnimation() //调用灰太狼轨迹函数

    }); //重新开始游戏区域
    $('.reStart').click(function() {
        $('.score').html(0);
        $('.mask').fadeOut(300); //淡出重新开始界面
        progressHandler(); //重新调用进度条函数
        startWolfAnimation() //重新调用灰太狼轨迹函数
    });


    function progressHandler() { //封装进度条函数
        var time = 60;
        $('.progress').css({ width: 180 }); //每次执行先重置进度条
        var timer = setInterval(() => { //定义循环计时器
            var pGesw = $('.progress').width(); //获取进度条长度
            pGesw -= 1; //每次执行计时器进度条长度减一
            $('.progress').css({ width: pGesw }); //减去后重新赋给当前进度条状态
            if (pGesw <= 0) { //当进度条为0(也就是说走完后)
                clearInterval(timer); //清除计时器
                $('.mask').stop().fadeIn(200); //显示重新开始游戏界面
                stopWolfAnimation(); //游戏结束停止图片继续跳动
            } //100毫秒执行一次计时器(长度减一总长度为180也就是说一秒减10十八秒游戏就结束了)
        }, 333.33);
        var Countdown = setInterval(() => {
            if (time > 0) {
                time--;
                if (time < 20) {
                    $('.times').css({
                        color: 'red',
                        fontWeight: 700,
                    });
                };
                $('.times').html(time + 's');
            } else {
                time = 60;
                clearInterval(Countdown);
            }
        }, 1000);
    };
    var wolfTimer; //定义全局变量(图片索引计时器的)
    function startWolfAnimation() { //封装灰太狼自定义函数
        //两个数组分别保存所有灰太狼和小灰灰的图片(h为灰太狼x为小灰灰)
        var wolf_1 = ['./imgs/h0.png', './imgs/h1.png', './imgs/h2.png', './imgs/h3.png', './imgs/h4.png', './imgs/h5.png', './imgs/h6.png', './imgs/h7.png', './imgs/h8.png', './imgs/h9.png'];
        var wolf_2 = ['./imgs/x0.png', './imgs/x1.png', './imgs/x2.png', './imgs/x3.png', './imgs/x4.png', './imgs/x5.png', './imgs/x6.png', './imgs/x7.png', './imgs/x8.png', './imgs/x9.png'];
        var arrPos = [ //这个个数组保存所有(灰太狼and小灰灰)可能出现的位置
            { left: "100px", top: "115px" },
            { left: "20px", top: "160px" },
            { left: "190px", top: "142px" },
            { left: "105px", top: "193px" },
            { left: "19px", top: "221px" }, //说白了就是9个坑分别的位置
            { left: "202px", top: "212px" },
            { left: "120px", top: "275px" },
            { left: "30px", top: "295px" },
            { left: "209px", top: "297px" }
        ]; //创建img标签
        var wolfImage = $('<img src="" class="wolfImage">');
        var posIndex = Math.round(Math.random() * 8); //随机数0到8的随机整数
        wolfImage.css({ //给创建的img标签设置样式
            position: 'absolute', //设为绝对定位(css里的父级已经设置了相对定位)
            top: arrPos[posIndex].top, //图片出现的上侧位置(arrPos中的随机一个)
            left: arrPos[posIndex].left //图片出现的左侧位置(arrPos中的随机一个)
        }); //随机的整数如果等于了0就执行灰太狼的照片否则执行小灰灰的
        var wolfType = Math.round(Math.random()) == 0 ? wolf_1 : wolf_2;
        window.wolfIndex = 0; //用window声明两个全局变量
        window.wolfIndexEnd = 5; //图片的开始位置和结束位置
        wolfTimer = setInterval(() => { //处理图片的计时器(被全局变量保存着)
            if (wolfIndex > wolfIndexEnd) { //当图片从第一张走到了第五张
                wolfImage.remove(); //删除当前图片
                clearInterval(wolfTimer); //清除计时器
                startWolfAnimation(); //继续重新出现图片
            }; //没到时创建的img设置src为灰太狼或小灰灰的第一张张片
            wolfImage.attr('src', wolfType[wolfIndex]);
            wolfIndex++; //开始往下累加照片到条件满足
        }, 200); //300毫秒执行一次
        $('.container').append(wolfImage); //把创建的图片追加给页面
        gameRules(wolfImage); //记分数(传递过去的实参则为当前图片)
    }
    //统计分数
    function gameRules(wolfImage) { //形参接收
        wolfImage.one('click', function() { //防止用户连续点击图片造成Bug所以用one只执行一次
            window.wolfIndex = 5; //点击之后立马切换为挨打的照片
            window.wolfIndexEnd = 9; //一直执行到第九张
            var src = $(this).attr('src'); //获取当前点击图片的sec
            var flag = src.indexOf('h') >= 0; //只要src里包含h就是true(看作0 false看作-1)
            if (flag) { //为真代表打了灰太狼加10分
                $(".score").text(parseInt($(".score").text()) + 10);
            } else { //获取score分数设置它的text文本只取整数为真加10为假减10
                $('.score').text(parseInt($('.score').text()) - 10);
            }
            setInterval(() => { //及时刷新分数状态
                var score = $('.score').html(); //获取分值
                $('.result').html('您的得分是：' + score); //展示给用户
            }, 1);
        });
    };
    //当倒计时结束
    function stopWolfAnimation() {
        $('.wolfImage').remove(); //删除图片
        clearInterval(wolfTimer); //清除定时器
    };
});